<!DOCTYPE html>
<!--
* CoreUI - Free Bootstrap Admin Template
* @version v2.0.0
* @link https://coreui.io
* Copyright (c) 2018 creativeLabs Łukasz Holeczek
* Licensed under MIT (https://coreui.io/license)
-->

<html lang="en">

<head>
  <base href="./">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
  <meta name="author" content="Łukasz Holeczek">
  <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
  <title>课程教学平台</title>
  <!-- Icons-->
  <link href="vendors/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
  <link href="vendors/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
  <link href="vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <link href="vendors/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
  <!-- Main styles for this application-->
  <link href="css/style.css" rel="stylesheet">
  <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
  <style type="text/css">
    .code {
      font-family: Arial;
      font-style: italic;
      font-weight: bold;
      border: 0;
      letter-spacing: 3px;
      color: blue;
    }
  </style>
</head>

<body class="app flex-row align-items-center">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-6"id="itemsTemplate" >
        <div class="card mx-4" >
          <div class="card-body p-4">
            <h1>课程教学平台账号注册</h1>
            <form class="validation" action="" method="post" enctype="multipart/form-data">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <i class="icon-user"></i>
                  </span>
                </div>
                <input class="form-control" type="text" placeholder="请输入用户名" v-model="newItems.username" required>
              </div>
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <i class="icon-lock"></i>
                  </span>
                </div>
                <input class="form-control" type="password" v-model="newItems.password" placeholder="请输入密码" required>
              </div>
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <i class="icon-lock"></i>
                  </span>
                </div>
                <input class="form-control" type="password" v-model="newItems.password" placeholder="请输入确认密码" required>
              </div>
              <div class="form-group row">
                <label class="col-md-3 col-form-label">角色:</label>
                <div class="col-md-9 col-form-label">
                  <div class="form-check form-check-inline mr-1">
                    <input class="form-check-input" id="inline-radio1" type="radio" value="管理员" v-model="newItems.role"
                      name="inline-radios">
                    <label class="form-check-label" for="inline-radio1">管理员</label>
                  </div>
                  <div class="form-check form-check-inline mr-1">
                    <input class="form-check-input" id="inline-radio2" type="radio" value="教师" v-model="newItems.role"
                      name="inline-radios">
                    <label class="form-check-label" for="inline-radio2">教师</label>
                  </div>
                  <div class="form-check form-check-inline mr-1">
                    <input class="form-check-input" id="inline-radio3" type="radio" value="学生" v-model="newItems.role"
                      name="inline-radios">
                    <label class="form-check-label" for="inline-radio3">学生</label>
                  </div>
                </div>
              </div>
              <button class="btn btn-block btn-success" @click="add" type="button">注册</button>
              <button class="btn btn-ghost-primary" type="button" @click="add"><i class="icon-note"></i> 编辑</button>
              <button class="btn btn-block btn-success" type="button" onclick="window.location.href='/login.html'">已有账号，立即登录</button>
            </form>

          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- CoreUI and necessary plugins-->
  <script src="vendors/jquery/js/jquery.min.js"></script>
  <script src="vendors/popper.js/js/popper.min.js"></script>
  <script src="vendors/bootstrap/js/bootstrap.min.js"></script>
  <script src="vendors/pace-progress/js/pace.min.js"></script>
  <script src="vendors/perfect-scrollbar/js/perfect-scrollbar.min.js"></script>
  <script src="vendors/@coreui/coreui/js/coreui.min.js"></script>
  <script src="js/src/checkcode.js"></script>
  <script>
    var items = [];
    var app;
    $(function () {
      //使用jQuery提供的getJSON方法，向服务器发送一个请求
      //返回的结果由第二个参数的function处理
      // $.getJSON("http://127.0.0.1:5050/teacher", function (response) {
      $.getJSON("/users", function (response) {
        items = respons;
        for (var i = 0; i < items.length; i++) {
          items[i].select = false;
        }
        //使用vue.js框架，将response.data数据填充到itemsTemplate模板
        app = new Vue({
          el: '#itemsTemplate',
          data: {
            items: items,
            itemstime: '',
            //添加临时数组对象
            newItems: '',
            index: -1,
          },
          // 在 `methods` 对象中定义方法
          methods: {
            //注册
            add() {
              alert("1");
              //   var idd;
              // if (items.length == 0) {
              //   idd = 1;
              // } else {
              //   idd = items[items.length - 1].id + 1;
              // }
              // this.newItems = {
              //   id: idd, //id自动+1
              //   name: '',
              //   sex: '',
              //   role: '管理员',
              //   classname: '',
              //   course: '',
              //   status: '',
              //   registerDate:itemstime,
              //   username:'',
              //   password:'',
              // };
              //   var user = {
              //     id: app.newItems.id,
              //     name: app.newItems.name,
              //     sex: app.newItems.sex,
              //     registerDate: app.newItems.registerDate,
              //     status: app.newItems.status,
              //     course: app.newItems.course,
              //     class: app.newItems.class,
              //     username:app.newItems.username,
              //     password:app.newItems.password,
              //   };
              //   $.post("/users/create",
              //     user,
              //     function (data, status) {
              //       alert("数据: \n" + data + "\n状态: " + status);
              //     });
            },
          },
        });
        return;
      });
    });
  </script>
  <!-- 获取系统当前时间 -->
  <script type="text/javascript">
    // 每隔一秒执行一次函数
    window.setInterval("showtime()", 1000);

    function showtime() {
      var date = new Date();
      var s1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      var hh = date.getHours();
      var mi = date.getMinutes();
      var ss = date.getSeconds();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      if (hh >= 0 && hh <= 9) {
        hh = "0" + hh;
      }
      if (mi >= 0 && mi <= 9) {
        mi = "0" + mi;
      }
      if (ss >= 0 && ss <= 9) {
        hh = "0" + hh;
      }
      itemstime = year + s1 + month + s1 + strDate + " " + hh + ":" + mi +
        ":" + ss +
        " ";
      // return itemstime;
    }
  </script>
</body>

</html>